<template>
  <div class="tg">
    <router-link to="/">
      <div>
        <img src="https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&imageView2/1/w/48/h/48" alt="" />
        <p>烘焙百科</p>
      </div>
    </router-link>
    <div class="content">
      <div class="text" v-for="{ courseId, image, title } in data" :key="courseId" @click="cure(courseId)">
        <div class="f1">
          <img :src="image" alt="" />
        </div>
        <div class="f2">
          <p>{{ title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // Id值进行传参
    cure(courseId) {
      this.$router.push({
        path: '/cures',
        query: {
          courid: courseId
        }
      })
    },
    getData() {
      this.axios.get('/education/getNewbieGuide?_t=1666149484509&type=5&timestamp=1666149484508').then(res => {
        this.data = res.data.data.courseGuide
      })
    }
  }
}
</script>

<style scoped>
.tg > a > div:first-child > img {
  width: 8vw;
  margin: 2vh 3vw;
}
.tg > a > div:first-child {
  display: flex;
}
.tg > a > div:first-child > p {
  margin-top: 3vh;
  margin-left: 27vw;
  color: black;
  font-size: 5vw;
}
.content {
  width: 90vw;
  margin: 0 auto;
}
.content > div:first-child {
  display: none;
}
.text {
  height: 13vh;
  display: flex;
  margin-top: 3vh;
}
.tg::after {
  content: '';
  display: block;
  height: 3vh;
}
.f1 {
  width: 40vw;
  overflow: hidden;
}
.f1 > img {
  width: 100%;
}
.f2 {
  width: 50vw;
}
.f2 > p {
  margin: 2vh 0 0 2vw;
  font-size: 16px;
  color: #6e6868;
}
</style>
